<!-- src/views/AccountCenter/Profile.vue -->
<template>
    <div class="profile-container">
      <!-- 头部 -->
      <div class="profile-header">
        <h2>基本资料</h2>
        <div class="completeness">
          <span>资料完整度：</span>
          <div class="progress-bar">
            <div class="progress" :style="{ width: '20%' }"></div>
          </div>
        </div>
      </div>
  
      <!-- 提示框 -->
      <div class="notice-box">
        <p>完善更多个人信息，有助于我们为您提供更加个性化的服务，大麦网将尊重并保护您的隐私。</p>
      </div>
  
      <!-- 表单区域 -->
      <el-form label-position="right" label-width="100px">
        <el-form-item label="昵称：">
          <el-input v-model="form.nickname" placeholder="请输入昵称" />
        </el-form-item>
  
        <el-form-item label="真实姓名：">
          <el-input v-model="form.realName" placeholder="请输入真实姓名" />
        </el-form-item>
  
        <el-form-item label="性别：">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
  
        <el-form-item label="出生日期：">
          <div class="birthday-picker">
            <el-select v-model="form.year" placeholder="年">
              <el-option v-for="y in years" :key="y" :label="y" :value="y" />
            </el-select>
            <el-select v-model="form.month" placeholder="月">
              <el-option 
                v-for="m in 12" 
                :key="m" 
                :label="m.toString().padStart(2, '0')" 
                :value="m" />
            </el-select>
            <el-select v-model="form.day" placeholder="日">
              <el-option 
                v-for="d in 31" 
                :key="d" 
                :label="d.toString().padStart(2, '0')" 
                :value="d" />
            </el-select>
          </div>
        </el-form-item>
  
        <el-form-item label="身份证号：">
          <el-input 
            v-model="form.idNumber" 
            placeholder="请输入身份证号码"
            maxlength="18" />
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" class="save-btn">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  
  // 生成年份选项（示例生成1980-2020）
  const years = Array.from({length: 41}, (_, i) => 1980 + i)
  
  const form = reactive({
    nickname: '麦子4cszy',
    realName: '',
    gender: '男',
    year: 1990,
    month: 1,
    day: 1,
    idNumber: ''
  })
  </script>
  
  <style scoped>
  .profile-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .profile-header {
    margin-bottom: 30px;
    h2 {
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;
    }
  }
  
  .completeness {
    display: flex;
    align-items: center;
    color: #666;
    span {
      margin-right: 10px;
    }
  }
  
  .progress-bar {
    width: 200px;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    .progress {
      height: 100%;
      background: #230303;
      border-radius: 4px;
      transition: width 0.3s;
    }
  }
  
  .notice-box {
    background: #f8f8f8;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 30px;
    p {
      color: #999;
      font-size: 12px;
      line-height: 1.5;
      margin: 0;
    }
  }
  
  .birthday-picker {
    display: flex;
    gap: 10px;
    :deep(.el-select) {
      width: 120px;
    }
  }
  
  .save-btn {
    background: #230303;
    border-color: #230303;
    padding: 12px 40px;
    &:hover {
      background: #c40303;
      border-color: #c40303;
    }
  }
  
  :deep(.el-form-item__label) {
    color: #666;
    font-weight: normal;
  }
  </style>